iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

前端「設計」聖光之路系列 第 18

響應式圖片選用技巧

  • 分享至 

  • xImage
  •  

網站上總需要圖片來點綴,除了客戶提供解析度不足的圖片外,我們也看從許多素材網站找到不錯的圖片,而選用圖片除了找到合適主題外,也需要花不少時間來比對是否合適於網站。

本篇依據 CSS 的觀念來提供一些選用圖片的技巧,藉此來減少 25% 搜尋素材的時間。

技術限制

響應式圖片運用上與技術限制有很大的關係,其中有兩個要點是必須要注意的:

  • CSS 呈現圖片的方法
  • 裝置尺寸變化

CSS 呈現圖片的方法

以下圖來說是一張原始比例的圖片,長寬比約為 960:640,在 CSS 中如果需要限制為正方形的尺寸,常見手法是運用 background-size: cover 或 contain 的方式。

https://ithelp.ithome.com.tw/upload/images/20181101/200836081dfvHzkGgH.png

以下兩張圖片則是使用這兩種屬性,而前者是使用 cover,後者則是運用 contain(灰色為背景色彩),運用上更是 cover 被許多設計師、開發者使用,這種方式盡可能在有限空間中呈現最多畫面。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608c0PtmHojpC.png

contain:在有限空間中呈現完整圖片,畫面中的灰色部分則是背景。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608iulJeFOA89.png
圖片來源:https://unsplash.com

裝置寬度

由於圖片顯示區域會受到裝置寬度的影響,我們將上述的圖片分別放置在不同的尺寸上呈現,會得到如下的結果。

960 * 450 桌面版畫面:由於這張圖片的配置是屬於水平,且 主體 僅有佔少量空間,在橫向畫面上呈現沒有什麼問題。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608bxYm2Bg8fr.png

360 * 450 行動版畫面:雖然畫面偏向水平,但由於 主體 只有一張椅子,畫面縮小後椅子只要能完整呈現,依然沒有什麼問題。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608qeKavFQnt6.png

接下來,我們選用另一張圖片來做介紹:

960 * 450 桌面版畫面:畫面中沙發是主體,完整地在畫面中間,在桌面版沒有什麼問題。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608wTi35IgtcR.png

360 * 450 行動版畫面:但由於 主體 是橫式的,在行動版的垂直小空間中就顯得明顯不足,這樣導致了畫面左右方被裁切掉,這樣的圖片就不太合適。

https://ithelp.ithome.com.tw/upload/images/20181101/20083608ktBRdQ7Pui.png

快速驗證方法

CSS background cover 方式會盡可能的呈現完整圖片,而呈現的空間是可以再透過 x, y 軸線做定位上的為條(通常預設為中間或固定的四個邊角)。

接下來可以先透過繪圖軟體準備好裁切空間,上面包含了桌面版空間及行動版空間,兩個空間的交疊處則是安全區域。

  • 主體必須比重疊安全區域還要小
  • 桌面版空間可以水平呈現

如下圖,既可以呈現完整畫面,也同時可以測試重疊區域是否有足夠空間。
https://ithelp.ithome.com.tw/upload/images/20181101/20083608nIPv6w7480.png

接下來把裁切區域套用在畫面上即可得到以下結果。
https://ithelp.ithome.com.tw/upload/images/20181101/20083608L8oOdwXlpP.png

結語

視覺也有不同的邏輯,而這個邏輯並非能用程式邏輯完整的解釋,本篇直接透過實際的案例解釋圖片選擇方式,讓大家在選圖上可以節省一些時間。


上一篇
Icon fonts 的常見資源
下一篇
版面視覺動線配置
系列文
前端「設計」聖光之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言